<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- v-resource依赖于vue -->
		<!-- this.$http.get/post/jsonp -->
		<script src="../lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" value="get请求" @click="getInfo"/>
			<input type="button" value="post请求" @click="postInfo"/>
			<input type="button" value="jsonp请求" @click="jsonpInfo"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{},
				methods:{
					getInfo(){//发起get请求
						this.$http.get('http://www.liulongbin.top:3005/api/getprodlist').then(function(result){
							//通过result.body拿到服务器返回的数据
							console.log(result.body);
						})
					},
					postInfo(){//发起post请求 注意：当前 POST 接口只支持解析 x-www-form-urlencoded 格式的数据！
					//手动发起的post请求，默认没有表单格式，有的服务器处理不了
					//通过设置第三个参数emulateJSON:true 设置为普通表单
						this.$http.post('http://www.liulongbin.top:3005/api/post',{},{emulateJSON:true}).then(result=>{
							console.log(result.body);
						})
					},
					jsonpInfo(){
						this.$http.jsonp('http://www.liulongbin.top:3005/api/jsonp').then(result=>{
							console.log(result.body);
						})
					}
				}
			})
		</script>
	</body>
</html>
